<template>
  <section>
    <aside>
      <ul>
        <li :class="{active:mode===0}" @click="getData(0)"><span class="el-icon-remove-outline mr5"></span>待处理</li>
        <li :class="{active:mode===2}" @click="getData(2)"><span class="el-icon-video-play mr5"></span>进行中</li>
        <li :class="{active:mode===3}" @click="getData(3)"><span class="el-icon-circle-check mr5"></span>已完成</li>
      </ul>
    </aside>
    <div class="container">
      <div class="option">
        <el-form :inline="true" :model="options" class="bottom-border" ref="optionForm">
          <el-form-item label="路段" prop="road">
            <el-input v-model="options.road" clearable placeholder="请输入路段名" size="mini"
                      @keyup.enter.native="getData"></el-input>
          </el-form-item>
          <el-form-item label="位置" prop="stakeNo">
            <el-input v-model="options.stakeNo" clearable placeholder="请输入位置信息" size="mini"
                      @keyup.enter.native="getData"></el-input>
          </el-form-item>
          <el-form-item label="摄像机" prop="cameraName">
            <el-input v-model="options.cameraName" clearable placeholder="请输入摄像机名称" size="mini"
                      @keyup.enter.native="getData"></el-input>
          </el-form-item>
          <el-form-item label="事件类型" prop="eventTypeTwoCode">
            <el-select v-model="options.eventTypeTwoCode" placeholder="请选择" clearable size="mini"
                       @keyup.enter.native="getData">
              <el-option
                v-for="item in evtTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="identityId==='3'?'发布部门':'发布部门'">
            <el-select v-model="options.dispatcher" placeholder="请选择" clearable size="mini"
                       @keyup.enter.native="getData">
              <el-option
                v-for="item in this.orgData['base']"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="identityId==='3'?'发布时间':'指派时间'">
            <el-date-picker
              @keyup.enter.native="getData"
              v-model="options.timeSpace"
              clearable
              type="daterange"
              align="right"
              size="mini"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="getData">搜索</el-button>
            <el-button size="mini" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table">
        <ul v-if="orderList.length>0">
          <li v-for="(item,index) in orderList">
            <div class="header">
              <div class="item">
                <span class="road">
                  <span class="el-icon-map-location"></span>
                  {{item['cameraName']}}
                </span>
              </div>
              <div class="item">
                <span class="time">
                  {{item['detectedTime']}}
                </span>
              </div>
              <div class="item" style="margin-left: auto;">
                <el-button type="primary" size="mini" @click="sendOrder(item)"
                           v-if="mode===0 && identityId==='3'">派单
                </el-button>
                <el-button type="primary" plain size="mini" @click="returnOrder(item)"
                           v-if="mode===2 && identityId==='3' && !item['handleStartTime']">撤回
                </el-button>
                <el-button type="primary" size="mini" @click="startOrder(item)" v-if="mode===0 && identityId==='4'">开始
                </el-button>
                <!--                <el-button type="primary" plain size="mini" @click="returnOrder(item)"-->
                <!--                           v-if="mode===0 && identityId==='4'">退回-->
                <!--                </el-button>-->
                <el-button type="primary" size="mini" @click="endOrder(item)" v-if="mode===2 && identityId==='4'">提交
                </el-button>
              </div>
            </div>
            <div class="body">
              <div class="item">
                <span class="name"
                      :style="{borderColor:evtColor(item['eventTypeTwoCode']),color:evtColor(item['eventTypeTwoCode'])}">
                  {{evtName(item['eventInfoState'])}}
                </span>
              </div>
              <div class="item">
                <output>{{item['road']}}</output>
                <label>路段</label>
              </div>
              <div class="item">
                <output>{{item['stakeNo']}}</output>
                <label>事件位置</label>
              </div>
              <div class="item">
                <output :src="webCfg.api.url+':'+webCfg.api.fileSvrPort+'/'+item['imgPath']"
                        @click="viewBigImg($event)"><span class="el-icon-camera"></span></output>
                <label>事件图片</label>
              </div>
              <div class="item">
                <output :src="webCfg.api.url+':'+webCfg.api.fileSvrPort+'/'+item['videoPath']"
                        @click="viewBigVideo($event)"><span class="el-icon-video-camera"></span></output>
                <label>事件视频</label>
              </div>

              <div class="item aling-left w250" v-if="identityId==='3'">
                <div><label>发布部门：</label>
                  <output>{{orgName(item['department'],1)}}</output>
                </div>
                <div><label>发布时间：</label>
                  <output>{{item['expectTime']}}
                    <el-popover
                      v-if="mode!==0"
                      placement="top"
                      title=""
                      width="150"
                      trigger="hover">
                      <slot>
                        <strong style="font-weight: 600">时限：</strong>
                        {{item['expectTimeNum']}}<br>
                        <strong style="font-weight: 600">备注：</strong>
                        {{item['remark']}}
                      </slot>
                      <span slot="reference" class="el-icon-info" style="font-size: 14px"></span>
                    </el-popover>
                  </output>
                </div>
              </div>

              <div class="item aling-left w250" v-if="identityId==='3' && mode!==0">
                <div><label>指派单位：</label>
                  <output>{{orgName(item['handle'],2)}}</output>
                </div>
                <div><label>指派时间：</label>
                  <output>{{item['expectTimeTwo']}}
                    <el-popover
                      placement="top"
                      title=""
                      width="150"
                      trigger="hover">
                      <slot>
                        <strong style="font-weight: 600">时限：</strong>
                        {{item['expectTimeTwoNum']}}分钟<br>
                        <strong style="font-weight: 600">备注：</strong>
                        {{item['remark2']}}
                      </slot>
                      <span slot="reference" class="el-icon-info" style="font-size: 14px"></span>
                    </el-popover>


                  </output>
                </div>
              </div>

              <div class="item aling-left w250" v-if="identityId==='4'">
                <div><label>发布部门：</label>
                  <output>{{orgName(item['dispatcher'],1)}}</output>
                </div>
                <div><label>指派时间：</label>
                  <output>{{item['expectTimeTwo']}}
                    <el-popover
                      v-if="mode!==0"
                      placement="top"
                      title=""
                      width="150"
                      trigger="hover">
                      <slot>
                        <strong style="font-weight: 600">时限：</strong>
                        {{item['expectTimeTwoNum']}}分钟<br>
                        <strong style="font-weight: 600">备注：</strong>
                        {{item['remark2']}}
                      </slot>
                      <span slot="reference" class="el-icon-info" style="font-size: 14px"></span>
                    </el-popover>
                  </output>
                </div>
              </div>


              <div class="item aling-left" v-if="mode===0">
                <div>
                  <label>时限：</label>
                  <output>{{mode===0 && identityId==='3'?item['expectTimeNum']:item['expectTimeTwoNum']}}分钟</output>
                </div>
                <div>
                  <label>备注：</label>
                  <output>
                    <el-popover
                      placement="top"
                      title=""
                      width="150"
                      trigger="hover">
                      <slot>
                        <strong style="font-weight: 600">备注：</strong>
                        {{mode===0 && identityId==='3'?item['remark']:item['remark2']}}
                      </slot>
                      <span slot="reference" class="el-icon-info" style="font-size: 14px"></span>
                    </el-popover>
                  </output>
                </div>
              </div>

              <div class="item aling-left w250" v-if="mode===3 || mode===2">
                <div><label>处理开始时间：</label>
                  <output>{{item['handleStartTime']}}</output>
                </div>
                <div><label>处理结束时间：</label>
                  <output>{{item['handleEndTime']}}
                    <el-popover
                      v-if="item['result']"
                      placement="top"
                      title=""
                      width="150"
                      trigger="hover">
                      <slot>
                        <strong style="font-weight: 600">反馈结果：</strong>
                        {{item['result']}}
                      </slot>
                      <span slot="reference" class="el-icon-info" style="font-size: 14px"></span>
                    </el-popover>
                  </output>
                </div>
              </div>


              <div class="item" v-if="mode===3 && item['resultPic']" style="width:calc(3 * 68px)">
                <label class="img">
                  <img v-for="itm in (item['resultPic'].split(','))" :src="itm" @click="viewBigImg($event)">
                </label>
              </div>


              <div class="item">
                <span class="img">
                  <img :src="require('img/system/state_'+item['imgState']+'.png')" alt="" v-if="item['imgState']!==7">
                  <el-popover
                    v-else
                    placement="left"
                    title=""
                    width="150"
                    trigger="hover">
                    <slot>
                        <strong style="font-weight: 600">退回原因：</strong>
                        {{item['returnNote']}}
                      </slot>
                    <img slot="reference" :src="require('img/system/state_'+item['imgState']+'.png')" alt="">
                    </el-popover>

                </span>
              </div>
            </div>
          </li>


        </ul>
        <div class="isNull" v-else>
          查询结果为空！
        </div>


        <Dialog :cfg="dialogCfg" ref="dialog">
          <el-form label-width="120px" ref="form" :rules="rules" :model="dialogData" label-position="top"
                   class="evtHandleBox">
            <el-form-item label="事件信息：">
              <p>
                <label>位置：</label>
                <output>{{dialogData.road}} {{dialogData.stakeNo}} {{dialogData.cameraName}}</output>
              </p>
              <p>
                <label>类型：</label>
                <output>{{dialogData['eventInfoState']}}</output>
              </p>
              <p>
                <label>时间：</label>
                <output>{{dialogData['detectedTime']}}</output>
              </p>

            </el-form-item>
            <el-form-item label="处理单位：" class="eventInfoBox" prop="handleOrg">
              <el-select v-model="dialogData.handleOrg" placeholder="请选择单位" size="mini" style="width: 100%">
                <el-option
                  v-for="item in orgData.center"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="处理时限：" prop="timeSpace">
              <el-select
                size="mini"
                v-model="dialogData.timeSpace"
                filterable
                default-first-option
                placeholder="请选择处理时限">
                <el-option
                  v-for="item in timeSpaces"
                  :key="item"
                  :label="item+'分钟'"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="备注：" prop="note">
              <el-input v-model="dialogData.note" placeholder="请输入备注内容" size="mini"></el-input>
            </el-form-item>
          </el-form>
        </Dialog>

        <Dialog :cfg="dialogCfg2" ref="dialog2">
          <el-form label-width="120px" ref="form2" :rules="rules2" :model="dialogData2" label-position="top"
                   class="evtHandleBox">
            <el-form-item label="事件信息：">
              <p>
                <label>位置：</label>
                <output>{{dialogData2.road}} {{dialogData2.stakeNo}} {{dialogData2.cameraName}}</output>
              </p>
              <p>
                <label>类型：</label>
                <output>{{dialogData2['eventInfoState']}}</output>
              </p>
              <p>
                <label>时间：</label>
                <output>{{dialogData2['detectedTime']}}</output>
              </p>

            </el-form-item>
            <el-form-item label="处理结果：" class="eventInfoBox" prop="result">
              <el-input v-model="dialogData2.result" placeholder="请输入处理结果内容" size="mini"></el-input>
            </el-form-item>

            <el-form-item label="反馈图片：(最多三张)" prop="image">
              <div class="imgBox" v-if="dialogData2.image.length>0">
                <ul>
                  <li v-for="(itm,idx) in dialogData2.image">
                    <img :src="itm" alt="">
                    <span style="font-size: 18px;" @click="delImg(idx)">×</span>
                  </li>
                </ul>
              </div>
              <el-button size="small" @click="beforeUpload" v-if="dialogData2.image.length<3">点击上传</el-button>
            </el-form-item>

          </el-form>
        </Dialog>


      </div>
      <div class="page" >
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="options.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="options.total">
        </el-pagination>
      </div>

    </div>

  </section>
</template>

<script>
  import moment from 'moment';
  import RingChart from 'kkui/echarts/RingChart';
  import Dialog from 'comp/common/Dialog.vue';

  moment.locale('zh-cn');

  export default {
    name: "HandleList",
    components: {
      RingChart,
      Dialog
    },
    data() {
      return {
        webCfg: WebCfg,
        mode: 0,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        user: this.$kkui.cache.get('user'),
        rules: {
          handleOrg: [
            {required: true, message: '处理单位不能为空！', trigger: 'change'}
          ],
          timeSpace: [
            {required: true, message: '处理时限不能为空！', trigger: 'change'}
          ],
          note: [
            {required: true, message: '备注不能为空！', trigger: 'change'}
          ]
        },
        rules2: {
          result: [
            {required: true, message: '反馈信息不能为空！', trigger: 'change'}
          ],
          // image: [
          //   {required: true, message: '反馈图片不能为空！', trigger: 'change'}
          // ],
        },

        imageUrl: '',


        defaultLimit: 10,
        defaultPage: 1,
        options: {
          timeSpace: [],
          road: '',
          cameraName: '',
          startTime: '',
          endTime: '',
          eventTypeTwoCode: '',
          dispatcher: '',
          page: 1,
          limit: 10,
          total: 0
        },

        dialogCfg: {
          width: 600,
          height: 400,
          title: '',
          closeShow: !!1,
          footerShow: !!1,
          submit: () => {
          }
        },
        dialogCfg2: {
          width: 600,
          height: 400,
          title: '',
          closeShow: !!1,
          footerShow: !!1,
          submit: () => {
          }
        },
        dialogData: {
          handleOrg: '',
          note: '',
          timeSpace: null
        },
        dialogData2: {
          result: '',
          image: [],
        },
        timeSpaces: WebCfg['timeSpaces'],

        orgData: {},
        evtTypes: [],
        orderList: [],

        timer: null,
        timer2: null,
        msgIds: []

      }
    },
    mounted() {
      this.getData();
      this.getEvtTypes();
      this.getOrgData();
      this.$kkui.loading_deepBlue.hide();

      this.getMsg();


    },
    computed: {
      identityId: function () {
        return this.user.identityId
      },
      evtName() {
        return (name) => {
          if (!name) return '';
          name = name.replace(/[u4e00-u9fa5|+|-|_]/ig, ' ');
          return name.indexOf('-') > -1 ? name.split('-')[1] : name
        }
      },
      evtColor: function () {
        return function (code) {
          return {
            "002-009-002": '#EA6666',
            "002-010-005": '#FAC858',
            "002-005": '#5470C6',
            "002-007-002": '#3BB36E',
            "002-005-006": '#3FA3DC',
            "001-005": '#C280DC',
            "001-001-001": '#FC8452'
          }[code]
        }
      },
      evtPos() {
        return (pos) => {
          if (!pos) return '';
          let _pos = pos.replace(/[\u4e00-\u9fa5]/ig, '').replace(/\(.*\)/, '');
          if (_pos.indexOf(' ') > -1) _pos = _pos.split(' ')[1];
          if (_pos.indexOf('_') > -1) _pos = _pos.split('_')[1];
          return _pos;
        }
      },
      orgName: function () {
        return (code, name) => {
          if (!code || !name) return '';
          return name === 1 ? this.orgData['base'] && this.orgData['base'].filter(item => item.id === code)[0]['name'] :
            this.orgData['center'] && this.orgData['center'].filter(item => item.id === code)[0]['name']
        }
      }
    },
    methods: {
      getMsg() {
        const cfg = {
          page: 1,
          limit: 10,
          eventState: 0,

        };
        if (this.identityId === '3') cfg['distribution'] = this.user.departmentId;
        if (this.identityId === '4') cfg['handle'] = this.user.departmentId;
        const fn = () => {
          this.$server('handle.list', cfg).then(data => {
            const msgIds = [];
            data.rows.forEach(item => {
              if (this.msgIds.indexOf(item.id) === -1) {
                msgIds.push(item.id);
              }
            });
            this.msgIds = [...msgIds];
            this.$parent.$parent.$refs.header.newMsgFlag = msgIds.length > 0;
            this.$parent.$parent.$refs.header.msg = msgIds.length > 0 ? `<div style="display: flex; justify-content: space-between; line-height: 40px; height: 40px; background-color: #f9f9f9; padding: 0 10px;">

            <span style="color:#404040">你有${msgIds.length}条业务需要处理！请点击左侧"待处理"菜单进行查看！</span>
            <span style="color:#828282">${moment(new Date()).format('YYYY-MM-DD HH:mm:ss')}</span>
            </div>` : '';
          });
        };
        fn();
        this.timer2 = setInterval(fn, 5 * 60 * 1000)


      },

      getEvtTypes() {
        let _events = this.$kkui.cache.get('dict')['event'];
        let _cameras = this.$kkui.cache.get('dict')['camera'];
        this.evtTypes = [];
        for (let value in _events) {
          if (value !== '-1') {
            const _name = _events[value];
            this.evtTypes.push({
              value,
              label: _name.indexOf('-') > -1 ? _name.split('-')[1] : _name
            })
          }
        }
        for (let value in _cameras) {
          if (value !== '0') {
            const _name = _cameras[value];
            this.evtTypes.push({
              value,
              label: '相机' + (_name.indexOf('-') > -1 ? _name.split('-')[1] : _name)
            })
          }
        }
        _events = null;
      },

      getOrgData() {
        this.$server('org.list').then(data => {
          let orgData = {center: [], base: []};
          data.forEach(item => {
            if (item.name === '各分中心') {
              orgData.center = item.children;
            } else {
              orgData.base = orgData.base.concat(item.children)
            }
          });
          this.orgData = orgData;
        })
      },

      getData(mode) {
        console.log(mode);
        this.$kkui.loading.show();
        if (typeof mode === 'number') {
          this.mode = mode;
          this.options = {
            ...this.options, ...{
              cameraName: '',
              road: '',
              stakeNo: '',
              startTime: '',
              endTime: '',
              eventTypeTwoCode: '',
              dispatcher: '',
              page: 1,
              timeSpace: []
            }
          };
        }

        if (this.options.timeSpace.length === 2) {
          this.options.startTime = this.formatTime(this.options.timeSpace[0]);
          this.options.endTime = this.formatTime(this.options.timeSpace[1]);
        }
        if (this.mode !== 3) { // 未处理数组
          // this.options.limit = 10;
          // this.options.page = 1;
          this.options.limit = this.defaultLimit;
          this.options.page = this.defaultPage;
        } else {
          this.options.limit = this.defaultLimit;
          this.options.page = this.defaultPage;
        }
        const cfg = {
          ...this.options,
          eventState: this.mode
        };
        delete cfg.timeSpace;


        if (this.identityId === '3') cfg['distribution'] = this.user.departmentId;
        if (this.identityId === '4') cfg['handle'] = this.user.departmentId;


        this.$server('handle.list', cfg).then(data => {
          this.orderList.splice(0);

          /**
           * imgState 1: 正常 2：超时 3：即将超时
           */

          if (this.mode === 3) {
            this.timer && clearTimeout(this.timer);
            this.timer = null;
            this.orderList = data.rows.map(item => {
              return {
                ...item,
                imgState: 5
              }
            });
          } else {
            if (this.identityId === '3' && this.mode === 2) {
              this.orderList = data.rows.map(item => {
                return {
                  ...item,
                  // imgState: !item['handleStartTime'] ? 6 : (item['handleEndTime'] ? 5 : 4)
                  imgState: 0
                }
              });
              this.startTimer();
            } else {
              this.orderList = data.rows.map(item => {
                return {
                  ...item,
                  imgState: 0
                }
              });
              this.startTimer();
            }
          }
          this.options.total = data.total;
          this.$kkui.loading.hide();

        })
      },

      startTimer() {
        // imgState:!item['handleStartTime']?6:(item['handleEndTime']?5:4)
        this.timer && clearInterval(this.timer);
        this.timer = null;
        this.timer = setInterval(() => {
          this.orderList.forEach(item => {
            if (this.mode === 0) {
              if (this.identityId === '3') {
                const c = new Date(item['expectTime']).getTime() + item['expectTimeNum'] * 60 * 1000 - new Date().getTime();
                item['imgState'] = c < 0 ? 2 : (c <= 60 * 1000 * 2 ? 3 : (item['returnNote'] ? 7 : 1));
              }
              if (this.identityId === '4') {
                const c = new Date(item['expectTimeTwo']).getTime() + item['expectTimeTwoNum'] * 60 * 1000 - new Date().getTime();
                item['imgState'] = c < 0 ? 2 : (c <= 60 * 2 * 1000 ? 3 : 1);
              }
            } else if (this.mode === 2) {
              if (this.identityId === '4') {
                const c = new Date(item['expectTimeTwo']).getTime() + item['expectTimeTwoNum'] * 60 * 1000 - new Date().getTime();
                item['imgState'] = c < 0 ? 2 : (c <= 60 * 1000 * 2 ? 3 : 4);
              } else if (this.identityId === '3') {
                const c = new Date(item['expectTimeTwo']).getTime() + item['expectTimeTwoNum'] * 60 * 1000 - new Date().getTime();
                item['imgState'] = !item['handleStartTime'] ? 6 : (item['handleEndTime'] ? 5 : (c < 0 ? 2 : (c <= 60 * 1000 * 2 ? 3 : 4)))
              }
            }
          });
        }, 1000);
      },
      reset() {
        this.options = {
          ...this.options, ...{
            road: '',
            stakeNo: '',
            cameraName: '',
            startTime: '',
            endTime: '',
            eventTypeTwoCode: '',
            dispatcher: '',
            page: 1,
            timeSpace: []
          }
        };
        this.getData();
      },

      sendOrder(item) {
        this.dialogData = {
          ...{
            handleOrg: '',
            note: '',
            timeSpace: null
          },
          ...item
        };

        this.$refs.dialog.show = true;
        this.dialogCfg.width = 600;
        this.dialogCfg.height = 460;
        this.dialogCfg.title = '派单';
        this.dialogCfg.submit = () => {
          this.$refs['form'].validate((valid) => {
            if (valid) {
              this.$server('handle.sendOrder', {
                id: item.id,
                dispatcher: this.user.departmentId * 1,
                handle: this.dialogData.handleOrg,
                expectTimeTwoNum: this.dialogData.timeSpace,
                remark2: this.dialogData.note
              }).then(data => {
                this.$kkui.msg({
                  icon: 1,
                  cont: '派单成功！'
                });
                this.$refs.dialog.show = false;
                this.getData();
              })
            }
          });
        }
      },

      returnOrder(item) {
        const fn = (note) => {
          this.$server('handle.returnOrder', {
            id: item.id,
            returnNote: note || ''
          }).then(data => {
            this.$kkui.msg({
              icon: 1,
              cont: '撤销成功！'
            });
            this.getData();
          })
        };


        if (this.identityId === '3') {
          this.$kkui.alert({
            icon: 0,
            cont: '确定撤回此指派吗？',
            callback: fn
          })
        } else {
          this.$kkui.alert({
            icon: 0,
            cont: '确定退回此指派吗？',
            callback: () => {
              this.$kkui.submit({
                title: '退回订单',
                icon: 0,
                placeholder: '请输入退回指派的原因'
              }, (val) => {
                fn(val)
              })
            }
          })
        }
      },

      startOrder(item) {
        this.$kkui.alert({
          icon: 0,
          cont: '确定开始处理吗？',
          callback: () => {
            this.$server('handle.startOrder', {
              id: item.id,
            }).then(data => {
              this.$kkui.msg({
                icon: 1,
                cont: '操作成功！'
              })
              this.getData();

            })
          }
        });
      },

      endOrder(item) {

        this.dialogData2 = {
          ...item,
          ...{
            result: '',
            image: []
          }
        };
        this.imageUrl = [];

        this.$refs.dialog2.show = true;
        this.dialogCfg2.width = 600;
        this.dialogCfg2.height = 480;
        this.dialogCfg2.title = '提交';
        this.dialogCfg2.submit = () => {
          this.$refs['form2'].validate((valid) => {
            if (valid) {
              this.$kkui.alert({
                icon: 0,
                cont: '确定提交处理吗？',
                callback: () => {
                  this.$server('handle.endOrder', {
                    id: item.id,
                    result: this.dialogData2.result,
                    image: this.dialogData2.image
                  }).then(data => {
                    this.$kkui.msg({
                      icon: 1,
                      cont: '提交成功！'
                    });
                    this.$refs.dialog2.show = false;
                    this.getData();
                  })
                }
              });
            }
          });
        }
      },

      viewBigImg(e) {
        const h = document.body.clientHeight * 0.9;
        const w = h * 16 / 9;
        this.$kkui.dialog({
          width: w + 'px',
          height: h + 'px',
          cont: `<div style="width:100%; height:100%;background-color: #000"><img src="${e.currentTarget.getAttribute('src')}" style="width:100%; height:100%;object-fit:contain;" /></div>`
        })
      },
      viewBigVideo(e) {
        const h = document.body.clientHeight * 0.9;
        const w = h * 16 / 9;
        this.$kkui.dialog({
          width: w + 'px',
          height: h + 'px',
          cont: `<video src="${e.currentTarget.getAttribute('src')}" autoplay controls loop
          style="width: 100%; height: 100%;"></video>`
        })
      },
      handleSizeChange(val) {
        this.options.limit = val;
        this.defaultLimit = val;
        this.getData();

      },
      handleCurrentChange(val) {
        this.options.page = val;
        this.defaultPage = val;
        this.getData();
      },
      formatTime(time) {
        return moment(time).format('YYYY-MM-DD 00:00:00')
      },

      delImg(idx) {
        this.dialogData2.image.splice(idx, 1);

      },

      beforeUpload() {
        this.$kkui.submit({
          title: '上传反馈图片 ',
          image: !!1
        }, (file) => {
          this.$sysServer.ServerUpload(file).then(data => {
            this.dialogData2.image.push(data.fileUrl)
          })

        })
      }
    },
    beforeDestroy() {
      this.timer && clearInterval(this.timer);
      this.timer = null;

      this.timer2 && clearInterval(this.timer2);
      this.timer2 = null;
    }
  }
</script>

<style scoped lang="scss">
  @import "~css/system.scss";

  section {
    aside {
      li {
        letter-spacing: 2px;
      }
    }

    .container {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding-bottom: 5px;

      .option {
        height: 40px;
        padding: 8px 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #ddd;

        /deep/ .el-input__inner {
          padding: 0 5px;
          width: 120px;
        }

        /deep/ .el-form-item {
          margin-bottom: 0;
        }
      }

      .table {
        flex: 1;
        overflow-y: auto;
        padding: 0 10px;

        .isNull {
          text-align: center;
          line-height: 150px;
          color: #999;
          font-size: 14px;
        }

        li {
          margin-bottom: 16px;
          border: 1px solid rgba(9, 14, 36, .1);

          .header {
            height: 32px;
            background-color: rgba(9, 14, 36, .05);
            padding: 4px 20px;
            display: flex;
            align-items: center;
            font-size: 14px;
            gap: 10px;

            .item {
              .name {
                display: inline-block;
                min-width: 80px;
                border: 2px solid rgb(0, 160, 210);
                padding: 3px 0;
                border-radius: 3px;
                text-align: center;
                font-weight: 600;
              }

              .road {
                font-weight: 600;
              }

              .time {
                color: #828282;
              }
            }
          }

          &:hover {
            border-color: #00698C;
          }

          .body {
            display: flex;
            justify-content: space-between;
            padding: 10px 20px;

            .item {
              display: flex;
              text-align: center;
              flex-direction: column;
              justify-content: center;
              min-width: 100px;

              &.aling-left {
                text-align: left;
              }

              &.w200 {
                width: 200px;
              }

              &.w250 {
                width: 250px;
              }

              .name {
                border: 2px solid #fff;
                padding: 3px 0;
              }

              output {
                color: #4f4f4f;
                font-size: 14px;
                line-height: 20px;


                span {
                  font-size: 24px;
                  cursor: pointer;
                }
              }

              label {
                color: #828282;
                font-size: 12px;


                img {
                  max-height: 40px;
                  width: 64px;
                  margin: 0 2px;
                  cursor: pointer;
                }
              }

            }
          }
        }
      }
    }

    .evtHandleBox {

      label {
        color: #828282;
        margin-left: 28px;
      }

      output {
        color: #404040
      }

      span {
        width: 30%;
        display: inline-block;
        overflow: hidden;

      }

      span:last-child {
        width: 40%;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      /deep/ .el-form-item__content {
        line-height: 20px;
      }

      /deep/ .el-form-item {
        margin-bottom: 20px;
      }

      /deep/ .el-form-item__label {
        width: 100%;
        line-height: 24px;
        padding: 0;
        margin-bottom: 5px;
        background-color: #f9f9f9;
      }


    }
  }

  .imgBox {
    ul {
      display: flex;

      li {
        width: 20%;
        margin-right: 5px;
        position: relative;

        img {
          width: 100%;
        }

        span {
          position: absolute;
          top: -10px;
          right: -10px;
          font-weight: 600;
          display: inline !important;
          width: 20px !important;
          height: 20px;
          line-height: 18px;
          text-align: center;
          border: 1px solid #999;
          border-radius: 100%;
          background-color: #fff;
          color: #999;

          &:hover {
            color: #369;
            border-color: #369;
            cursor: pointer;
          }
        }
      }

    }
  }

  /deep/ .el-date-editor {
    width: 220px !important;
  }

  .page {
    height: 32px;
    padding: 8px;
    text-align: center;

    border-top: 1px solid rgba(9, 14, 36, .3);
  }

</style>
